<template>
  <div class="box">
    <div class="content">
      
        <router-view></router-view>
   
    </div>
    <ol class="footer">
      <router-link tag="li" to="/home/HostShow">
        <span class="iconfont icon-dianying2"></span>
        热映
      </router-link>
      <router-link tag="li" to="/home/Cinema">
        <span class="iconfont icon-yingyuan"></span>
        影院
      </router-link>
      <router-link tag="li" to="/home/Mine">
        <span class="iconfont icon-wode2"></span>
        我的
      </router-link>
    </ol>
  </div>
</template>

<script>
import HostShow from './home/HostShow'
export default {
  components:{
    HostShow
  }
}
</script>

<style lang="scss" scoped>
// .list{
//   display: flex;
// }
.box{
  height: 100%;
  display: flex;
  flex-direction: column;
.content{
  flex: 1;
  overflow: hidden;
  display: flex;
}
.footer{
  width: 375px;
  height: 50px;
  display: flex;
  li {
      flex: 1;
      list-style: none;
      font-size: 16px;
      font-weight: 500;
      color: #777;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  .router-link-active{
    color: red;
    font-weight: 700;
  }
}
}
</style>